<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>

  <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">

  <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  <link href="css/ionic.app.css" rel="stylesheet">
  -->

  <!-- ionic/angularjs js -->
  <script src="lib/ionic/js/ionic.bundle.js"></script>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>

  <!-- your app's js -->
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/services.js"></script>
</head>
<body ng-app="starter" style="background-color: lightgrey">

<!--头部-->
<div class="bar bar-item bar-header bar-dark item-icon-right ">
  <p class="title">微信</p>
  <i class=" icon ion-android-add has-badge"><i class="badge badge-assertive">2</i></i>

</div>
<div class="item item-input-inset item-icon-right">
  <label class="item item-input-wrapper" style="height: 100%;margin-top: 40px;padding: 0px">
    <input  type="text"  placeholder="请输入朋友的昵称" >
    <i class="icon ion-ios-search"></i>
  </label>
</div>
<!--内容-->
<div class="content" style="margin-top: 15px">
 <ul class="list" style="line-height: 40px">
   <li class="item  item-icon-left item-avatar-right">
     <img class="has-badge" src="img/1.jpg" alt="">
     <i class="icon ion-social-chrome assertive"></i>
     <i class="badge badge-assertive">1</i>
     朋友圈
   </li>
   <li class="item item-icon-left" style="margin-top: 15px">扫一扫
     <i class="icon ion-android-expand calm"></i>
   </li>
   <li class="item item-icon-left">摇一摇
     <i class="icon ion-android-hand calm"></i>
   </li>
   <li class="item item-icon-left"style="margin-top: 15px">附近的人
     <i class="icon ion-android-contacts calm"></i>
   </li>
   <li class="item item-icon-left"style="margin-top: 15px">购物
     <i class="icon ion-ios-cart assertive"></i>
   </li>
   <li class="item item-icon-left">游戏
     <i class="icon ion-android-happy balanced"></i>
   </li>
 </ul>
</div>
<!--尾部-->
<div class="tabs tabs-stable tabs-icon-top">
  <a class="tab-item"><i class="icon ion-ios-chatbubble-outline"></i>微信</a>
  <a class="tab-item"><i class="icon ion-ios-personadd-outline"></i>通讯录</a>
  <a class="tab-item has-badge active assertive"><i class="icon ion-ios-navigate-outline"></i>发现 <i class="badge badge-assertive">2</i></a>
  <a class="tab-item"><i class="icon ion-ios-person-outline"></i>我</a>
</div>
</body>
</html>
